<template>
  <j-modal :title="title" :width="1000" :visible="visible" :footer="null" @cancel="handleCancel" cancelText="关闭">
    <div class="toolbar">
      <a-upload name="file" :showUploadList="false" :accept="'.xls,.xlsx'" :customRequest="onCustomUpload">
        <a-button type="primary" preIcon="ant-design:upload-outlined" :loading="uploading">
          {{ uploading ? '上传中...' : '上传excel' }}
        </a-button>
      </a-upload>
      <a-button preIcon="ant-design:download-outlined" @click="handleDownloadTpl">下载模板</a-button>
      <a-button style="margin-left: 8px" preIcon="ant-design:reload-outlined" @click="loadQuestions" :loading="loading">刷新列表</a-button>
    </div>
    <div class="preview-wrap">
      <div v-if="loading" class="loading-wrap">
        <a-spin size="large" />
      </div>
      <div v-else-if="questions.length === 0" class="empty-wrap">
        <a-empty description="暂无题目数据" />
      </div>
      <div v-else class="q-item" v-for="(q, idx) in questions" :key="q.id || idx">
        <div class="q-title">
          {{ idx + 1 }}. {{ q.question }}
          <span class="q-type-tag">{{ getQuestionTypeText(q.type) }}</span>
        </div>
        <div class="q-options">
          <div v-if="q.type === 1" class="option-group">
            <a-radio-group v-model:value="q.selectedAnswer" class="radio-group">
              <a-radio v-if="q.one" value="A" class="option-radio">
                <span class="option-text">{{ q.one }}</span>
              </a-radio>
              <a-radio v-if="q.two" value="B" class="option-radio">
                <span class="option-text">{{ q.two }}</span>
              </a-radio>
              <a-radio v-if="q.three" value="C" class="option-radio">
                <span class="option-text">{{ q.three }}</span>
              </a-radio>
              <a-radio v-if="q.four" value="D" class="option-radio">
                <span class="option-text">{{ q.four }}</span>
              </a-radio>
              <a-radio v-if="q.five" value="E" class="option-radio">
                <span class="option-text">{{ q.five }}</span>
              </a-radio>
              <a-radio v-if="q.six" value="F" class="option-radio">
                <span class="option-text">{{ q.six }}</span>
              </a-radio>
              <a-radio v-if="q.seven" value="G" class="option-radio">
                <span class="option-text">{{ q.seven }}</span>
              </a-radio>
              <a-radio v-if="q.eight" value="H" class="option-radio">
                <span class="option-text">{{ q.eight }}</span>
              </a-radio>
            </a-radio-group>
          </div>
          <div v-else-if="q.type === 3" class="option-group">
            <a-checkbox-group v-model:value="q.selectedAnswer" class="checkbox-group">
              <a-checkbox v-if="q.one" value="A" class="option-checkbox">
                <span class="option-text">{{ q.one }}</span>
              </a-checkbox>
              <a-checkbox v-if="q.two" value="B" class="option-checkbox">
                <span class="option-text">{{ q.two }}</span>
              </a-checkbox>
              <a-checkbox v-if="q.three" value="C" class="option-checkbox">
                <span class="option-text">{{ q.three }}</span>
              </a-checkbox>
              <a-checkbox v-if="q.four" value="D" class="option-checkbox">
                <span class="option-text">{{ q.four }}</span>
              </a-checkbox>
              <a-checkbox v-if="q.five" value="E" class="option-checkbox">
                <span class="option-text">{{ q.five }}</span>
              </a-checkbox>
              <a-checkbox v-if="q.six" value="F" class="option-checkbox">
                <span class="option-text">{{ q.six }}</span>
              </a-checkbox>
              <a-checkbox v-if="q.seven" value="G" class="option-checkbox">
                <span class="option-text">{{ q.seven }}</span>
              </a-checkbox>
              <a-checkbox v-if="q.eight" value="H" class="option-checkbox">
                <span class="option-text">{{ q.eight }}</span>
              </a-checkbox>
            </a-checkbox-group>
          </div>
          <div v-else-if="q.type === 2" class="option-group">
            <a-radio-group v-model:value="q.selectedAnswer" class="radio-group">
              <a-radio value="A" class="option-radio">
                <span class="option-text">{{ q.one }}</span>
              </a-radio>
              <a-radio value="B" class="option-radio">
                <span class="option-text">{{ q.two }}</span>
              </a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="q-info">
          <span class="q-answer">正确答案: {{ q.correctAnswer }}</span>
          <span class="q-fraction">分值: {{ q.fraction }}分</span>
        </div>
        <div v-if="q.analysis" class="q-analysis">
          <span class="analysis-label">解析:</span>
          <span class="analysis-text">{{ q.analysis }}</span>
        </div>
      </div>
    </div>
  </j-modal>
</template>

<script lang="ts" setup>
  import { ref, defineExpose } from 'vue'
  import JModal from '/@/components/Modal/src/JModal/JModal.vue'
  import { downloadFile } from '/@/utils/common/renderUtils'
  import { useMethods } from '/@/hooks/system/useMethods'
  import { defHttp } from '/@/utils/http/axios'

  const title = ref('考试预览')
  const visible = ref(false)
  const templateUrl = ref('https://gbt-manage.oss-cn-zhangjiakou.aliyuncs.com/upload/%E7%A7%AF%E5%88%86%E7%AD%94%E9%A2%98%E8%80%83%E8%AF%95%E9%A2%98%E7%9B%AE.xls\n')
  const mainId = ref<string>('')
  const questions = ref<any[]>([])
  const importUrl = ref('')
  const loading = ref(false)
  const uploading = ref(false)
  const { handleImportXls } = useMethods()

  function open(record: Recordable, options?: { templateUrl?: string; questions?: any[] }) {
    mainId.value = record?.id
    templateUrl.value = options?.templateUrl || templateUrl.value
    importUrl.value = `/hr/dtQuestion/importExcel/${mainId.value}`
    visible.value = true
    loadQuestions()
  }

  function handleCancel() {
    visible.value = false
  }

  function handleDownloadTpl() {
    if (templateUrl.value) {
      downloadFile(templateUrl.value)
    }
  }

  function onCustomUpload(data) {
    uploading.value = true
    return handleImportXls(data, importUrl.value, () => {
      // 上传成功后刷新题目列表
      uploading.value = false
      loadQuestions()
    }).catch(() => {
      uploading.value = false
    })
  }

  async function loadQuestions() {
    if (!mainId.value) return
    
    loading.value = true
    try {
      const res = await defHttp.get({ 
        url: '/hr/dtQuestion/list', 
        params: { questionTypeId: mainId.value }
      })
      if (res && res.records) {
        // 为每个题目添加selectedAnswer字段，并设置为正确答案
        questions.value = res.records.map(q => ({
          ...q,
          selectedAnswer: q.type === 3 ? q.correctAnswer.split('') : q.correctAnswer
        }))
      } else {
        questions.value = []
      }
    } catch (error) {
      console.error('加载题目失败:', error)
      questions.value = []
    } finally {
      loading.value = false
    }
  }

  function getQuestionTypeText(type: number) {
    const typeMap = {
      1: '单选题',
      2: '判断题',
      3: '多选题'
    }
    return typeMap[type] || '未知类型'
  }

  defineExpose({ open })
</script>

<style lang="less" scoped>
  .toolbar {
    display: flex;
    gap: 8px;
    padding: 8px 0 12px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 12px;
  }
  .preview-wrap {
    max-height: 520px;
    overflow: auto;
    padding-right: 8px;
  }
  .loading-wrap, .empty-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
  }
  .q-item {
    padding: 16px 0;
    border-bottom: 1px dashed #e8e8e8;
  }
  .q-title {
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .q-type-tag {
    background: #1890ff;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
  }
  .q-options {
    margin-bottom: 12px;
  }
  .option-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 16px;
  }
  .radio-group, .checkbox-group {
    display: contents;
  }
  .option-radio, .option-checkbox {
    display: flex;
    align-items: flex-start;
    padding: 8px 12px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    background: #fafafa;
    transition: all 0.2s;
  }
  .option-radio:hover, .option-checkbox:hover {
    background: #f0f0f0;
    border-color: #d9d9d9;
  }
  .option-radio.ant-radio-wrapper-checked, .option-checkbox.ant-checkbox-wrapper-checked {
    background: #e6f7ff;
    border-color: #1890ff;
  }
  .option-text {
    color: #333;
    line-height: 1.5;
    margin-left: 4px;
  }
  .q-info {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #666;
  }
  .q-type {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 4px;
  }
  .q-answer {
    color: #52c41a;
    font-weight: 500;
  }
  .q-fraction {
    color: #1890ff;
    font-weight: 500;
  }
  .q-analysis {
    background: #f8f9fa;
    padding: 8px 12px;
    border-radius: 4px;
    border-left: 3px solid #1890ff;
  }
  .analysis-label {
    font-weight: 500;
    color: #666;
    margin-right: 8px;
  }
  .analysis-text {
    color: #333;
    line-height: 1.5;
  }
</style>


